<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>中传100件事</title>
	<meta name="viewport" content="user-scalable=no">
	<link rel="stylesheet" href="css/animate.min.css" />
	<link rel="stylesheet" href="css/main.css" />
</head>

<body>

	<div id="yinru" style="height: 100vh;">
		<img src="img/yinru/yinru_0004_图层-7.png" style="display: flex;width: 100vw;height: 100vh;">
		<img src="img/yinru/yinru_0002_图层-10.png" style="display: flex;transform: translate(70vw,-30vh)scale(2);">
		<img src="img/yinru/yinru_0001_ticket.png" style="display: flex;transform: translate(5vw,-54vh)scale(2);">
		<img src="img/yinru/yinru_0003_图层-39-拷贝-5.png"
			style="display: flex;transform: translate(80vw,-51vh)scale(2);position: absolute;">
		<img id="sinian" src="img/yinru/wenan.png" style="transform: translate(-23vw,20vh)scale(1.5);">
		<a href="#fbox" class="smooth">继续</a>
	</div>
	<div id="fbox" v-if="sfbox" style="height: 100vh;">
		<img src="img/first/f_0009_背景.png" class="ba" />
		<img src="img/first/f_0005_在中传-必做的.png" style="transform: translate(30vw,-56vh)scale(1.8);z-index: 1;" />
		<a href="#iname" class="smooth">
			<img src="img/first/f_0000_点击回忆.png" class="an " id="djhy" />
		</a>
		<img src="img/first/f_0007_logo.png" style="transform: translate(100px,-97vh)scale(2);" />
		<img src="img/first/f_0008_写字板.png" style="width:250px ;transform: translate(70vw,-75vh)scale(1.5);" />
		<img src="img/first/f_0006_setout.png" style="transform: scale(1.8)translate(11vw,-55vh);" />
		<img src="img/first/f_0004_蝴蝶.png" style="transform: scale(2)translate(28vw,-57vh);z-index: 2;" />
		<img src="img/first/f_0002_100.png" style="transform: scale(2)translate(40vw,-52vh);z-index: 2;" />
		<img src="img/first/f_0003_矩形-1-拷贝.png" style="transform: scale(2)translate(40vw,-53.5vh);z-index: 1;" />
		<img src="img/first/f_0001_件事.png" style="transform: scale(2)translate(40vw,-49vh);z-index: 2;" />
	</div>
	<div id="iname">
		<img src="./img/name.png" style="display: flex;width: 100vw;height: 100vh;">
		<input v-model="username" type="text" placeholder="中小传"
			style="background-color: rgba(0,0,0,0);text-align: center;width:600px; display: flex;font-size: 100px;transform: translate(20vw,-53vh);">
		<p style="display: none;">{{username}}123</p>
		<button id="tname"
			style="color: aliceblue;border: 0px;background-color: rgba(255,255,255,0);display:flex; font-size: 80px;transform: translate(44vw,-44vh);"
			@click="tname">确认</button>
	</div>
	<div id="sec">

		<div id="secb">
			<div id="sum">
				<p style="text-align: center;font-size: 60px;transform: translate(0vw,15vh);">{{username}}的清单<br />
					已选：{{sum}}</p>
			</div>
			<div id='list'>
				<audio ref="audio" :src="arurl"></audio>
				<ol class="ol-list">
					<li v-bind:class="color1" style="display: flex;" @click="click1">
						<p>{{message1}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen1">
						</div>
					</li>
					<br>
					<li v-bind:class="color2" style="display: flex;" @click="click2">
						<p>{{message2}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen2">
						</div>
					</li>
					<br>
					<li v-bind:class="color3" style="display: flex;" @click="click3">
						<p>{{message3}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen3">
						</div>
					</li>
					<br>
					<li v-bind:class="color4" style="display: flex;" @click="click4">
						<p>{{message4}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen4">
						</div>
					</li>
					<br>
					<li v-bind:class="color5" style="display: flex;" @click="click5">
						<p>{{message5}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen5">
						</div>
					</li>
					<br>
					<li v-bind:class="color6" style="display: flex;" @click="click6">
						<p>{{message6}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen6">
						</div>
					</li>
					<br>
					<li v-bind:class="color7" style="display: flex;" @click="click7">
						<p>{{message7}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen7">
						</div>
					</li>
					<br>
					<li v-bind:class="color8" style="display: flex;" @click="click8">
						<p>{{message8}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen8">
						</div>
					</li>
					<br>
					<li v-bind:class="color9" style="display: flex;" @click="click9">
						<p>{{message9}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen9">
						</div>
					</li>
					<br>
					<li v-bind:class="color10" style="display: flex;" @click="click10">
						<p>{{message10}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen10">
						</div>
					</li>
					<br>
					<li v-bind:class="color11" style="display: flex;" @click="click11">
						<p>{{message11}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen11">
						</div>
					</li>
					<br>
					<li v-bind:class="color12" style="display: flex;" @click="click12">
						<p>{{message12}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen12">
						</div>
					</li>
					<br>
					<li v-bind:class="color13" style="display: flex;" @click="click13">
						<p>{{message13}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen13">
						</div>
					</li>
					<br>
					<li v-bind:class="color14" style="display: flex;" @click="click14">
						<p>{{message14}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen14">
						</div>
					</li>
					<br>
					<li v-bind:class="color15" style="display: flex;" @click="click15">
						<p>{{message15}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen15">
						</div>
					</li>
					<br>
					<li v-bind:class="color16" style="display: flex;" @click="click16">
						<p>{{message16}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen16">
						</div>
					</li>
					<br>
					<li v-bind:class="color17" style="display: flex;" @click="click17">
						<p>{{message17}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen17">
						</div>
					</li>
					<br>
					<li v-bind:class="color18" style="display: flex;" @click="click18">
						<p>{{message18}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen18">
						</div>
					</li>
					<br>
					<li v-bind:class="color19" style="display: flex;" @click="click19">
						<p>{{message19}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen19">
						</div>
					</li>
					<br>
					<li v-bind:class="color20" style="display: flex;" @click="click20">
						<p>{{message20}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen20">
						</div>
					</li>
					<br>
					<li v-bind:class="color21" style="display: flex;" @click="click21">
						<p>{{message21}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen21">
						</div>
					</li>
					<br>
					<li v-bind:class="color22" style="display: flex;" @click="click22">
						<p>{{message22}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen22">
						</div>
					</li>
					<br>
					<li v-bind:class="color23" style="display: flex;" @click="click23">
						<p>{{message23}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen23">
						</div>
					</li>
					<br>
					<li v-bind:class="color24" style="display: flex;" @click="click24">
						<p>{{message24}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen24">
						</div>
					</li>
					<br>
					<li v-bind:class="color25" style="display: flex;" @click="click25">
						<p>{{message25}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen25">
						</div>
					</li>
					<br>
					<li v-bind:class="color26" style="display: flex;" @click="click26">
						<p>{{message26}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen26">
						</div>
					</li>
					<br>
					<li v-bind:class="color27" style="display: flex;" @click="click27">
						<p>{{message27}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen27">
						</div>
					</li>
					<br>
					<li v-bind:class="color28" style="display: flex;" @click="click28">
						<p>{{message28}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen28">
						</div>
					</li>
					<br>
					<li v-bind:class="color29" style="display: flex;" @click="click29">
						<p>{{message29}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen29">
						</div>
					</li>
					<br>
					<li v-bind:class="color30" style="display: flex;" @click="click30">
						<p>{{message30}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen30">
						</div>
					</li>
					<br>
					<li v-bind:class="color31" style="display: flex;" @click="click31">
						<p>{{message31}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen31">
						</div>
					</li>
					<br>
					<li v-bind:class="color32" style="display: flex;" @click="click32">
						<p>{{message32}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen32">
						</div>
					</li>
					<br>
					<li v-bind:class="color33" style="display: flex;" @click="click33">
						<p>{{message33}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen33">
						</div>
					</li>
					<br>
					<li v-bind:class="color34" style="display: flex;" @click="click34">
						<p>{{message34}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen34">
						</div>
					</li>
					<br>
					<li v-bind:class="color35" style="display: flex;" @click="click35">
						<p>{{message35}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen35">
						</div>
					</li>
					<br>
					<li v-bind:class="color36" style="display: flex;" @click="click36">
						<p>{{message36}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen36">
						</div>
					</li>
					<br>
					<li v-bind:class="color37" style="display: flex;" @click="click37">
						<p>{{message37}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen37">
						</div>
					</li>
					<br>
					<li v-bind:class="color38" style="display: flex;" @click="click38">
						<p>{{message38}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen38">
						</div>
					</li>
					<br>
					<li v-bind:class="color39" style="display: flex;" @click="click39">
						<p>{{message39}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen39">
						</div>
					</li>
					<br>
					<li v-bind:class="color40" style="display: flex;" @click="click40">
						<p>{{message40}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen40">
						</div>
					</li>
					<br>
					<li v-bind:class="color41" style="display: flex;" @click="click41">
						<p>{{message41}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen41">
						</div>
					</li>
					<br>
					<li v-bind:class="color42" style="display: flex;" @click="click42">
						<p>{{message42}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen42">
						</div>
					</li>
					<br>
					<li v-bind:class="color43" style="display: flex;" @click="click43">
						<p>{{message43}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen43">
						</div>
					</li>
					<br>
					<li v-bind:class="color44" style="display: flex;" @click="click44">
						<p>{{message44}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen44">
						</div>
					</li>
					<br>
					<li v-bind:class="color45" style="display: flex;" @click="click45">
						<p>{{message45}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen45">
						</div>
					</li>
					<br>
					<li v-bind:class="color46" style="display: flex;" @click="click46">
						<p>{{message46}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen46">
						</div>
					</li>
					<br>
					<li v-bind:class="color47" style="display: flex;" @click="click47">
						<p>{{message47}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen47">
						</div>
					</li>
					<br>
					<li v-bind:class="color48" style="display: flex;" @click="click48">
						<p>{{message48}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen48">
						</div>
					</li>
					<br>
					<li v-bind:class="color49" style="display: flex;" @click="click49">
						<p>{{message49}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen49">
						</div>
					</li>
					<br>
					<li v-bind:class="color50" style="display: flex;" @click="click50">
						<p>{{message50}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen50">
						</div>
					</li>
					<br>
					<li v-bind:class="color51" style="display: flex;" @click="click51">
						<p>{{message51}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen51">
						</div>
					</li>
					<br>
					<li v-bind:class="color52" style="display: flex;" @click="click52">
						<p>{{message52}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen52">
						</div>
					</li>
					<br>
					<li v-bind:class="color53" style="display: flex;" @click="click53">
						<p>{{message53}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen53">
						</div>
					</li>
					<br>
					<li v-bind:class="color54" style="display: flex;" @click="click54">
						<p>{{message54}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen54">
						</div>
					</li>
					<br>
					<li v-bind:class="color55" style="display: flex;" @click="click55">
						<p>{{message55}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen55">
						</div>
					</li>
					<br>
					<li v-bind:class="color56" style="display: flex;" @click="click56">
						<p>{{message56}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen56">
						</div>
					</li>
					<br>
					<li v-bind:class="color57" style="display: flex;" @click="click57">
						<p>{{message57}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen57">
						</div>
					</li>
					<br>
					<li v-bind:class="color58" style="display: flex;" @click="click58">
						<p>{{message58}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen58">
						</div>
					</li>
					<br>
					<li v-bind:class="color59" style="display: flex;" @click="click59">
						<p>{{message59}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen59">
						</div>
					</li>
					<br>
					<li v-bind:class="color60" style="display: flex;" @click="click60">
						<p>{{message60}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen60">
						</div>
					</li>
					<br>
					<li v-bind:class="color61" style="display: flex;" @click="click61">
						<p>{{message61}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen61">
						</div>
					</li>
					<br>
					<li v-bind:class="color62" style="display: flex;" @click="click62">
						<p>{{message62}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen62">
						</div>
					</li>
					<br>
					<li v-bind:class="color63" style="display: flex;" @click="click63">
						<p>{{message63}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen63">
						</div>
					</li>
					<br>
					<li v-bind:class="color64" style="display: flex;" @click="click64">
						<p>{{message64}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen64">
						</div>
					</li>
					<br>
					<li v-bind:class="color65" style="display: flex;" @click="click65">
						<p>{{message65}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen65">
						</div>
					</li>
					<br>
					<li v-bind:class="color66" style="display: flex;" @click="click66">
						<p>{{message66}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen66">
						</div>
					</li>
					<br>
					<li v-bind:class="color67" style="display: flex;" @click="click67">
						<p>{{message67}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen67">
						</div>
					</li>
					<br>
					<li v-bind:class="color68" style="display: flex;" @click="click68">
						<p>{{message68}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen68">
						</div>
					</li>
					<br>
					<li v-bind:class="color69" style="display: flex;" @click="click69">
						<p>{{message69}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen69">
						</div>
					</li>
					<br>
					<li v-bind:class="color70" style="display: flex;" @click="click70">
						<p>{{message70}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen70">
						</div>
					</li>
					<br>
					<li v-bind:class="color71" style="display: flex;" @click="click71">
						<p>{{message71}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen71">
						</div>
					</li>
					<br>
					<li v-bind:class="color72" style="display: flex;" @click="click72">
						<p>{{message72}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen72">
						</div>
					</li>
					<br>
					<li v-bind:class="color73" style="display: flex;" @click="click73">
						<p>{{message73}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen73">
						</div>
					</li>
					<br>
					<li v-bind:class="color74" style="display: flex;" @click="click74">
						<p>{{message74}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen74">
						</div>
					</li>
					<br>
					<li v-bind:class="color75" style="display: flex;" @click="click75">
						<p>{{message75}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen75">
						</div>
					</li>
					<br>
					<li v-bind:class="color76" style="display: flex;" @click="click76">
						<p>{{message76}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen76">
						</div>
					</li>
					<br>
					<li v-bind:class="color77" style="display: flex;" @click="click77">
						<p>{{message77}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen77">
						</div>
					</li>
					<br>
					<li v-bind:class="color78" style="display: flex;" @click="click78">
						<p>{{message78}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen78">
						</div>
					</li>
					<br>
					<li v-bind:class="color79" style="display: flex;" @click="click79">
						<p>{{message79}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen79">
						</div>
					</li>
					<br>
					<li v-bind:class="color80" style="display: flex;" @click="click80">
						<p>{{message80}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen80">
						</div>
					</li>
					<br>
					<li v-bind:class="color81" style="display: flex;" @click="click81">
						<p>{{message81}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen81">
						</div>
					</li>
					<br>
					<li v-bind:class="color82" style="display: flex;" @click="click82">
						<p>{{message82}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen82">
						</div>
					</li>
					<br>
					<li v-bind:class="color83" style="display: flex;" @click="click83">
						<p>{{message83}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen83">
						</div>
					</li>
					<br>
					<li v-bind:class="color84" style="display: flex;" @click="click84">
						<p>{{message84}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen84">
						</div>
					</li>
					<br>
					<li v-bind:class="color85" style="display: flex;" @click="click85">
						<p>{{message85}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen85">
						</div>
					</li>
					<br>
					<li v-bind:class="color86" style="display: flex;" @click="click86">
						<p>{{message86}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen86">
						</div>
					</li>
					<br>
					<li v-bind:class="color87" style="display: flex;" @click="click87">
						<p>{{message87}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen87">
						</div>
					</li>
					<br>
					<li v-bind:class="color88" style="display: flex;" @click="click88">
						<p>{{message88}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen88">
						</div>
					</li>
					<br>
					<li v-bind:class="color89" style="display: flex;" @click="click89">
						<p>{{message89}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen89">
						</div>
					</li>
					<br>
					<li v-bind:class="color90" style="display: flex;" @click="click90">
						<p>{{message90}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen90">
						</div>
					</li>
					<br>
					<li v-bind:class="color91" style="display: flex;" @click="click91">
						<p>{{message91}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen91">
						</div>
					</li>
					<br>
					<li v-bind:class="color92" style="display: flex;" @click="click92">
						<p>{{message92}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen92">
						</div>
					</li>
					<br>
					<li v-bind:class="color93" style="display: flex;" @click="click93">
						<p>{{message93}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen93">
						</div>
					</li>
					<br>
					<li v-bind:class="color94" style="display: flex;" @click="click94">
						<p>{{message94}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen94">
						</div>
					</li>
					<br>
					<li v-bind:class="color95" style="display: flex;" @click="click95">
						<p>{{message95}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen95">
						</div>
					</li>
					<br>
					<li v-bind:class="color96" style="display: flex;" @click="click96">
						<p>{{message96}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen96">
						</div>
					</li>
					<br>
					<li v-bind:class="color97" style="display: flex;" @click="click97">
						<p>{{message97}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen97">
						</div>
					</li>
					<br>
					<li v-bind:class="color98" style="display: flex;" @click="click98">
						<p>{{message98}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen98">
						</div>
					</li>
					<br>
					<li v-bind:class="color99" style="display: flex;" @click="click99">
						<p>{{message99}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen99">
						</div>
					</li>
					<br>
					<li v-bind:class="color100" style="display: flex;" @click="click100">
						<p>{{message100}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen100">
						</div>
					</li>
					<br>
					<li v-bind:class="color101" style="display: flex;" @click="click101">
						<p>{{message101}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen101">
						</div>
					</li>
					<br>
					<li v-bind:class="color102" style="display: flex;" @click="click102">
						<p>{{message102}}</p>
						<div id="duihao">
							<img src="./img/gou.png" style="display: flex;transform: scale(0.5);" v-if="seen102">
						</div>
					</li>
					<br>

				</ol>
			</div>
			<div class="list-bottom"></div>
		</div>
	</div>
	<div id="currentlist">您目前的选单：</div>
	<div id="thr">

		<div v-if="tseen">
			<div v-if="tseen" id="sum1">
				<p class="pname">{{username}}:</p>
				<p class="psum">{{sum}}</p>
			</div>
			<div id="plist">
				<ul id="plist1" v-if="pseen" style="height: auto;list-style: none;">
					<li v-for="item in items" :key="item.message" id="list2">
						{{ item.message }}
					</li>
				</ul>
			</div>
			<div id="plist-bottom"></div>
			<div id="zs">
				<span>
					{{username}}
				</span>
				<img :src="iurl1" style="width: 100vw;">
			</div>
		</div>

	</div>
	<div id="print">
		<button class="p_btn" id="ts" @click="cts">打印我的清单和证书</button>
	</div>

	<div id="save">长按保存你的清单和证书</div>
	<img src="" alt="" id="targetImage">
	<script src="js/dom-to-image.min.js"></script>
	<script src="js/vue.js" type="text/javascript"></script>
	<script src="js/jquery-3.5.1.min.js"></script>
	<script type="text/javascript">
		var zss = new Vue({
			el: '#zs',
			data: {
				username: '中小传',
				iurl1: "./img/zhengshu/zs1.png",
			},
		});

		var name = new Vue({
			el: "#iname",
			data: {
				username: "",
			},
			methods: {
				tname: function () {
					zss.username = this.username;
					data.username = this.username;
					document.getElementById("sec").scrollIntoView();
				}
			}
		});
		var plist1 = new Vue({
			el: '#plist1',
			data: {
				pseen: 1,
				items: [

				]
			}
		});

		var data = {
			sum: 0,
			username: "中小传",
			tseen: 1,
		};
		var fir = new Vue({
			el: '#fbox',
			data: {
				sfbox: 1,
			},
			methods: {
				cdjhy: function () {
					document.getElementById("iname").scrollIntoView();
				},
			}
		});
		var test = new Vue({
			el: '#ts',
			data: {

			},
			methods: {
				cts: function () {
					vm1.tseen = 1;
					plist1.pseen = 1;
					if (vm.sum < 12) {
						zss.iurl1 = './img/zhengshu/zs1.png';
					} else if (vm.sum < 24) {
						zss.iurl1 = './img/zhengshu/zs1.png';
					} else if (vm.sum < 36) {
						zss.iurl1 = './img/zhengshu/zs1.png';
					} else if (vm.sum <= 40) {
						zss.iurl1 = './img/zhengshu/zs1.png';
					} else if (vm.sum < 48) {
						zss.iurl1 = './img/zhengshu/zs2.png';
					} else if (vm.sum <= 60) {
						zss.iurl1 = './img/zhengshu/zs2.png';
					} else if (vm.sum < 72) {
						zss.iurl1 = './img/zhengshu/zs3.png';
					} else if (vm.sum <= 80) {
						zss.iurl1 = './img/zhengshu/zs3.png';
					} else if (vm.sum < 84) {
						zss.iurl1 = './img/zhengshu/zs4.png';
					} else if (83 < vm.sum) {
						zss.iurl1 = './img/zhengshu/zs4.png';
					};


					// window.pageYoffset = 0;
					// document.documentElement.scrollTop = 0;
					// document.body.scrollTop = 0;
					// targetImage = document.getElementById("targetImage");

					// html2canvas(document.getElementById("thr")).then(function (canvas) {
					// 	document.getElementById("canvas-container").appendChild(canvas);
					// 	targetImage.setAttribute('src', canvas.toDataURL());
					// 	targetImage.style.width = "100vw";
					// });
					node = document.getElementById("thr");
					targetImage = document.getElementById("targetImage");
					domtoimage.toPng(node)
						.then(function (dataUrl) {
							targetImage.src = dataUrl;
						})
						.catch(function (error) {
							console.error('oops, something went wrong!', error);
						});

					// document.getElementById("targetImage").scrollIntoView(true);
					
					var pos = $("#targetImage").offset().top;
					$("html,body").animate({
						scrollTop: pos
					}, 1000);
				
					$("#save").delay("1200").fadeIn();

				},
			}
		});
		var app = new Vue({
			el: '#list',
			data: {
				arurl: './sound/gouxuan.mp3',
				message1: '1、关注新传小馆',
				message2: '2、通宵赶一次ddl',
				message3: '3、在楼妈敲门时迅速收拾寝室',
				message4: '4、打卡校歌墙',
				message5: '5、在天桥买一次烤红薯',
				message6: '6、睡过一次早八',
				message7: '7、给室友报名风采之星',
				message8: '8、报名参加一次一周cp',
				message9: '9、品尝一次广院肉饼',
				message10: '10、在502开一次会',
				message11: '11、去二外聚一次餐',
				message12: '12、冬天踩一次钢琴湖的冰',
				message13: '13、经历一次电脑崩溃',
				message14: '14、偶遇一次明星',
				message15: '15、带错一次课本',
				message16: '16、双十一带麻袋取快递',
				message17: '17、花腰聚餐',
				message18: '18、宿舍小团建',
				message19: '19、挤一次四十八教的电梯',
				message20: '20、被小哥哥递一次健身卡',
				message21: '21、上课摸一次鱼',
				message22: '22、晚上在南操跑步',
				message23: '23、为炫夏活动投稿一次',
				message24: '24、48教迷一次路',
				message25: '25、在选课的时候狂奔向图书馆',
				message26: '26、入手中传羽绒服',
				message27: '27、踩过一次校园里的银杏叶',
				message28: '28、学会至少两个Adobe软件',
				message29: '29、参加一次百团大战',
				message30: '30、报名成为学院活动的志愿者',
				message31: '31、转发广院学实的微信公众号领门票',
				message32: '32、去星光吃一次锅盔',
				message33: '33、穿着睡衣取一次快递',
				message34: '34、吃遍南北苑食堂的每一个窗口',
				message35: '35、去1500报围观晚会',
				message36: '36、在中传助手上发布消息',
				message37: '37、中午下课后在宿舍门口翻找外卖',
				message38: '38、和舍友讨论下课后吃什么',
				message39: '39、图书拼单点奶茶',
				message40: '40、去茶说通宵复习',
				message41: '41、下课后从1教狂奔向48教',
				message42: '42、参观校史馆',
				message43: '43、创建自己的公众号',
				message44: '44、在powerbank和队友一起大杀四方',
				message45: '45、下午第一节课前买瑞幸咖啡续命',
				message46: '46、抢一次锅盔群的红包',
				message47: '47、完成一次小组拍摄',
				message48: '48、转发自己的调查问卷到同学群',
				message49: '49、用宿舍楼下镜子自拍',
				message50: '50、吃星光的钵钵鸡和水煮鱼',
				message51: '51、吃过一次校医院的闭门羹',
				message52: '52、图书馆占座之旅',
				message53: '53、手机电脑同时开刷网课',
				message54: '54、吃一次崔老师的真面',
				message55: '55、综合楼排练节目',
				message56: '56、看电影点映',
				message57: '57、南操看星星,堆雪人,打雪仗',
				message58: '58、冬至在食堂吃一次饺子',
				message59: '59、零度以下跑八百',
				message60: '60、给炫夏推送留言',
				message61: '61、在饭点排一次学实的票',
				message62: '62、军训啃大白馒头',
				message63: '63、误入拍摄镜头',
				message64: '64、军训参加拉练',
				message65: '65、买一次盗版coco',
				message66: '66、体验一次没有抢到任何限选课',
				message67: '67、看学校上了热搜',
				message68: '68、在传媒大学站拍夕阳',
				message69: '69、喝快乐阿姨酸奶',
				message70: '70、在校园喂猫',
				message71: '71、给校园里的不同猫咪取名字',
				message72: '72、吃一次西街水串',
				message73: '73、熬夜蹲限选课放新增名额',
				message74: '74、排看不到头的长队等待体检',
				message75: '75、听师哥师姐讲学校里都市传说',
				message76: '76、和哥姐聚餐玩广院小游戏',
				message77: '77、加各种各样的美食群',
				message78: '78、被北京的大风吹得睁不开眼',
				message79: '79、和孔子像合照',
				message80: '80、在钢琴湖畔看一次图书馆全貌',
				message81: '81、了解1：2：7的含义',
				message82: '82、去一次30号楼的101教室',
				message83: '83、通过答辩',
				message84: '84、问一次为什么“道路两旁只有一排年轻的白杨”',
				message85: '85、军训的时候背校训',
				message86: '86、看数不清的选课文件',
				message87: '87、吐槽一次录取通知书设计',
				message88: '88、被问一次以后是不是要去当主持人',
				message89: '89、做一次访谈',
				message90: '90、校园追星之旅',
				message91: '91、在1500报抢共享单车',
				message92: '92、带着下饭菜去军训基地',
				message93: '93、打卡文化广场',
				message94: '94、打卡“西门刘昊然”',
				message95: '95、去一次新年音乐会',
				message96: '96、在图书馆找卫生间',
				message97: '97、在图书馆一个一个书架找书结果迷路',
				message98: '98、爬过48教的四个楼梯',
				message99: '99、在英语考试前紧急购买耳机电池',
				message100: '100、宿舍集体搞怪合照',
				message101: '101、给这条推送点个转发与在看',
				message102: '102、为大学四年划上完美句号，说一声“我们毕业啦”',
				color1: 'blue',
				color2: 'blue',
				color3: 'blue',
				color4: 'blue',
				color5: 'blue',
				color6: 'blue',
				color7: 'blue',
				color8: 'blue',
				color9: 'blue',
				color10: 'blue',
				color11: 'blue',
				color12: 'blue',
				color13: 'blue',
				color14: 'blue',
				color15: 'blue',
				color16: 'blue',
				color17: 'blue',
				color18: 'blue',
				color19: 'blue',
				color20: 'blue',
				color21: 'blue',
				color22: 'blue',
				color23: 'blue',
				color24: 'blue',
				color25: 'blue',
				color26: 'blue',
				color27: 'blue',
				color28: 'blue',
				color29: 'blue',
				color30: 'blue',
				color31: 'blue',
				color32: 'blue',
				color33: 'blue',
				color34: 'blue',
				color35: 'blue',
				color36: 'blue',
				color37: 'blue',
				color38: 'blue',
				color39: 'blue',
				color40: 'blue',
				color41: 'blue',
				color42: 'blue',
				color43: 'blue',
				color44: 'blue',
				color45: 'blue',
				color46: 'blue',
				color47: 'blue',
				color48: 'blue',
				color49: 'blue',
				color50: 'blue',
				color51: 'blue',
				color52: 'blue',
				color53: 'blue',
				color54: 'blue',
				color55: 'blue',
				color56: 'blue',
				color57: 'blue',
				color58: 'blue',
				color59: 'blue',
				color60: 'blue',
				color61: 'blue',
				color62: 'blue',
				color63: 'blue',
				color64: 'blue',
				color65: 'blue',
				color66: 'blue',
				color67: 'blue',
				color68: 'blue',
				color69: 'blue',
				color70: 'blue',
				color71: 'blue',
				color72: 'blue',
				color73: 'blue',
				color74: 'blue',
				color75: 'blue',
				color76: 'blue',
				color77: 'blue',
				color78: 'blue',
				color79: 'blue',
				color80: 'blue',
				color81: 'blue',
				color82: 'blue',
				color83: 'blue',
				color84: 'blue',
				color85: 'blue',
				color86: 'blue',
				color87: 'blue',
				color88: 'blue',
				color89: 'blue',
				color90: 'blue',
				color91: 'blue',
				color92: 'blue',
				color93: 'blue',
				color94: 'blue',
				color95: 'blue',
				color96: 'blue',
				color97: 'blue',
				color98: 'blue',
				color99: 'blue',
				color100: 'blue',
				color101: 'blue',
				color102: 'blue',
				seen1: 0,
				seen2: 0,
				seen3: 0,
				seen4: 0,
				seen5: 0,
				seen6: 0,
				seen7: 0,
				seen8: 0,
				seen9: 0,
				seen10: 0,
				seen11: 0,
				seen12: 0,
				seen13: 0,
				seen14: 0,
				seen15: 0,
				seen16: 0,
				seen17: 0,
				seen18: 0,
				seen19: 0,
				seen20: 0,
				seen21: 0,
				seen22: 0,
				seen23: 0,
				seen24: 0,
				seen25: 0,
				seen26: 0,
				seen27: 0,
				seen28: 0,
				seen29: 0,
				seen30: 0,
				seen31: 0,
				seen32: 0,
				seen33: 0,
				seen34: 0,
				seen35: 0,
				seen36: 0,
				seen37: 0,
				seen38: 0,
				seen39: 0,
				seen40: 0,
				seen41: 0,
				seen42: 0,
				seen43: 0,
				seen44: 0,
				seen45: 0,
				seen46: 0,
				seen47: 0,
				seen48: 0,
				seen49: 0,
				seen50: 0,
				seen51: 0,
				seen52: 0,
				seen53: 0,
				seen54: 0,
				seen55: 0,
				seen56: 0,
				seen57: 0,
				seen58: 0,
				seen59: 0,
				seen60: 0,
				seen61: 0,
				seen62: 0,
				seen63: 0,
				seen64: 0,
				seen65: 0,
				seen66: 0,
				seen67: 0,
				seen68: 0,
				seen69: 0,
				seen70: 0,
				seen71: 0,
				seen72: 0,
				seen73: 0,
				seen74: 0,
				seen75: 0,
				seen76: 0,
				seen77: 0,
				seen78: 0,
				seen79: 0,
				seen80: 0,
				seen81: 0,
				seen82: 0,
				seen83: 0,
				seen84: 0,
				seen85: 0,
				seen86: 0,
				seen87: 0,
				seen88: 0,
				seen89: 0,
				seen90: 0,
				seen91: 0,
				seen92: 0,
				seen93: 0,
				seen94: 0,
				seen95: 0,
				seen96: 0,
				seen97: 0,
				seen98: 0,
				seen99: 0,
				seen100: 0,
				seen101: 0,
				seen102: 0,
			},

			methods: {
				click1: function () {
					this.$refs.audio.play();
					app.seen1 = (app.seen1 - 1) ** 2;
					if (app.seen1 == 0) {
						data.sum -= 1;
						app.color1 = 'blue';
						plist1.items.pop({
							message: this.message1
						});
					} else {
						data.sum += 1;
						app.color1 = 'red';
						plist1.items.push({
							message: this.message1
						})
					}
				},
				click2: function () {
					this.$refs.audio.play();
					app.seen2 = (app.seen2 - 1) ** 2;
					if (app.seen2 == 0) {
						data.sum -= 1;
						app.color2 = 'blue';
						plist1.items.pop({
							message: this.message2
						});
					} else {
						data.sum += 1;
						app.color2 = 'red';
						plist1.items.push({
							message: this.message2
						})
					}
				},
				click3: function () {
					this.$refs.audio.play();
					app.seen3 = (app.seen3 - 1) ** 2;
					if (app.seen3 == 0) {
						data.sum -= 1;
						app.color3 = 'blue';
						plist1.items.pop({
							message: this.message3
						});
					} else {
						data.sum += 1;
						app.color3 = 'red';
						plist1.items.push({
							message: this.message3
						})
					}
				},
				click4: function () {
					this.$refs.audio.play();
					app.seen4 = (app.seen4 - 1) ** 2;
					if (app.seen4 == 0) {
						data.sum -= 1;
						app.color4 = 'blue';
						plist1.items.pop({
							message: this.message4
						});
					} else {
						data.sum += 1;
						app.color4 = 'red';
						plist1.items.push({
							message: this.message4
						})
					}
				},
				click5: function () {
					this.$refs.audio.play();
					app.seen5 = (app.seen5 - 1) ** 2;
					if (app.seen5 == 0) {
						data.sum -= 1;
						app.color5 = 'blue';
						plist1.items.pop({
							message: this.message5
						});
					} else {
						data.sum += 1;
						app.color5 = 'red';
						plist1.items.push({
							message: this.message5
						})
					}
				},
				click6: function () {
					this.$refs.audio.play();
					app.seen6 = (app.seen6 - 1) ** 2;
					if (app.seen6 == 0) {
						data.sum -= 1;
						app.color6 = 'blue';
						plist1.items.pop({
							message: this.message6
						});
					} else {
						data.sum += 1;
						app.color6 = 'red';
						plist1.items.push({
							message: this.message6
						})
					}
				},
				click7: function () {
					this.$refs.audio.play();
					app.seen7 = (app.seen7 - 1) ** 2;
					if (app.seen7 == 0) {
						data.sum -= 1;
						app.color7 = 'blue';
						plist1.items.pop({
							message: this.message7
						});
					} else {
						data.sum += 1;
						app.color7 = 'red';
						plist1.items.push({
							message: this.message7
						})
					}
				},
				click8: function () {
					this.$refs.audio.play();
					app.seen8 = (app.seen8 - 1) ** 2;
					if (app.seen8 == 0) {
						data.sum -= 1;
						app.color8 = 'blue';
						plist1.items.pop({
							message: this.message8
						});
					} else {
						data.sum += 1;
						app.color8 = 'red';
						plist1.items.push({
							message: this.message8
						})
					}
				},
				click9: function () {
					this.$refs.audio.play();
					app.seen9 = (app.seen9 - 1) ** 2;
					if (app.seen9 == 0) {
						data.sum -= 1;
						app.color9 = 'blue';
						plist1.items.pop({
							message: this.message9
						});
					} else {
						data.sum += 1;
						app.color9 = 'red';
						plist1.items.push({
							message: this.message9
						})
					}
				},
				click10: function () {
					this.$refs.audio.play();
					app.seen10 = (app.seen10 - 1) ** 2;
					if (app.seen10 == 0) {
						data.sum -= 1;
						app.color10 = 'blue';
						plist1.items.pop({
							message: this.message10
						});
					} else {
						data.sum += 1;
						app.color10 = 'red';
						plist1.items.push({
							message: this.message10
						})
					}
				},
				click11: function () {
					this.$refs.audio.play();
					app.seen11 = (app.seen11 - 1) ** 2;
					if (app.seen11 == 0) {
						data.sum -= 1;
						app.color11 = 'blue';
						plist1.items.pop({
							message: this.message11
						});
					} else {
						data.sum += 1;
						app.color11 = 'red';
						plist1.items.push({
							message: this.message11
						})
					}
				},
				click12: function () {
					this.$refs.audio.play();
					app.seen12 = (app.seen12 - 1) ** 2;
					if (app.seen12 == 0) {
						data.sum -= 1;
						app.color12 = 'blue';
						plist1.items.pop({
							message: this.message12
						});
					} else {
						data.sum += 1;
						app.color12 = 'red';
						plist1.items.push({
							message: this.message12
						})
					}
				},
				click13: function () {
					this.$refs.audio.play();
					app.seen13 = (app.seen13 - 1) ** 2;
					if (app.seen13 == 0) {
						data.sum -= 1;
						app.color13 = 'blue';
						plist1.items.pop({
							message: this.message13
						});
					} else {
						data.sum += 1;
						app.color13 = 'red';
						plist1.items.push({
							message: this.message13
						})
					}
				},
				click14: function () {
					this.$refs.audio.play();
					app.seen14 = (app.seen14 - 1) ** 2;
					if (app.seen14 == 0) {
						data.sum -= 1;
						app.color14 = 'blue';
						plist1.items.pop({
							message: this.message14
						});
					} else {
						data.sum += 1;
						app.color14 = 'red';
						plist1.items.push({
							message: this.message14
						})
					}
				},
				click15: function () {
					this.$refs.audio.play();
					app.seen15 = (app.seen15 - 1) ** 2;
					if (app.seen15 == 0) {
						data.sum -= 1;
						app.color15 = 'blue';
						plist1.items.pop({
							message: this.message15
						});
					} else {
						data.sum += 1;
						app.color15 = 'red';
						plist1.items.push({
							message: this.message15
						})
					}
				},
				click16: function () {
					this.$refs.audio.play();
					app.seen16 = (app.seen16 - 1) ** 2;
					if (app.seen16 == 0) {
						data.sum -= 1;
						app.color16 = 'blue';
						plist1.items.pop({
							message: this.message16
						});
					} else {
						data.sum += 1;
						app.color16 = 'red';
						plist1.items.push({
							message: this.message16
						})
					}
				},
				click17: function () {
					this.$refs.audio.play();
					app.seen17 = (app.seen17 - 1) ** 2;
					if (app.seen17 == 0) {
						data.sum -= 1;
						app.color17 = 'blue';
						plist1.items.pop({
							message: this.message17
						});
					} else {
						data.sum += 1;
						app.color17 = 'red';
						plist1.items.push({
							message: this.message17
						})
					}
				},
				click18: function () {
					this.$refs.audio.play();
					app.seen18 = (app.seen18 - 1) ** 2;
					if (app.seen18 == 0) {
						data.sum -= 1;
						app.color18 = 'blue';
						plist1.items.pop({
							message: this.message18
						});
					} else {
						data.sum += 1;
						app.color18 = 'red';
						plist1.items.push({
							message: this.message18
						})
					}
				},
				click19: function () {
					this.$refs.audio.play();
					app.seen19 = (app.seen19 - 1) ** 2;
					if (app.seen19 == 0) {
						data.sum -= 1;
						app.color19 = 'blue';
						plist1.items.pop({
							message: this.message19
						});
					} else {
						data.sum += 1;
						app.color19 = 'red';
						plist1.items.push({
							message: this.message19
						})
					}
				},
				click20: function () {
					this.$refs.audio.play();
					app.seen20 = (app.seen20 - 1) ** 2;
					if (app.seen20 == 0) {
						data.sum -= 1;
						app.color20 = 'blue';
						plist1.items.pop({
							message: this.message20
						});
					} else {
						data.sum += 1;
						app.color20 = 'red';
						plist1.items.push({
							message: this.message20
						})
					}
				},
				click21: function () {
					this.$refs.audio.play();
					app.seen21 = (app.seen21 - 1) ** 2;
					if (app.seen21 == 0) {
						data.sum -= 1;
						app.color21 = 'blue';
						plist1.items.pop({
							message: this.message21
						});
					} else {
						data.sum += 1;
						app.color21 = 'red';
						plist1.items.push({
							message: this.message21
						})
					}
				},
				click22: function () {
					this.$refs.audio.play();
					app.seen22 = (app.seen22 - 1) ** 2;
					if (app.seen22 == 0) {
						data.sum -= 1;
						app.color22 = 'blue';
						plist1.items.pop({
							message: this.message22
						});
					} else {
						data.sum += 1;
						app.color22 = 'red';
						plist1.items.push({
							message: this.message22
						})
					}
				},
				click23: function () {
					this.$refs.audio.play();
					app.seen23 = (app.seen23 - 1) ** 2;
					if (app.seen23 == 0) {
						data.sum -= 1;
						app.color23 = 'blue';
						plist1.items.pop({
							message: this.message23
						});
					} else {
						data.sum += 1;
						app.color23 = 'red';
						plist1.items.push({
							message: this.message23
						})
					}
				},
				click24: function () {
					this.$refs.audio.play();
					app.seen24 = (app.seen24 - 1) ** 2;
					if (app.seen24 == 0) {
						data.sum -= 1;
						app.color24 = 'blue';
						plist1.items.pop({
							message: this.message24
						});
					} else {
						data.sum += 1;
						app.color24 = 'red';
						plist1.items.push({
							message: this.message24
						})
					}
				},
				click25: function () {
					this.$refs.audio.play();
					app.seen25 = (app.seen25 - 1) ** 2;
					if (app.seen25 == 0) {
						data.sum -= 1;
						app.color25 = 'blue';
						plist1.items.pop({
							message: this.message25
						});
					} else {
						data.sum += 1;
						app.color25 = 'red';
						plist1.items.push({
							message: this.message25
						})
					}
				},
				click26: function () {
					this.$refs.audio.play();
					app.seen26 = (app.seen26 - 1) ** 2;
					if (app.seen26 == 0) {
						data.sum -= 1;
						app.color26 = 'blue';
						plist1.items.pop({
							message: this.message26
						});
					} else {
						data.sum += 1;
						app.color26 = 'red';
						plist1.items.push({
							message: this.message26
						})
					}
				},
				click27: function () {
					this.$refs.audio.play();
					app.seen27 = (app.seen27 - 1) ** 2;
					if (app.seen27 == 0) {
						data.sum -= 1;
						app.color27 = 'blue';
						plist1.items.pop({
							message: this.message27
						});
					} else {
						data.sum += 1;
						app.color27 = 'red';
						plist1.items.push({
							message: this.message27
						})
					}
				},
				click28: function () {
					this.$refs.audio.play();
					app.seen28 = (app.seen28 - 1) ** 2;
					if (app.seen28 == 0) {
						data.sum -= 1;
						app.color28 = 'blue';
						plist1.items.pop({
							message: this.message28
						});
					} else {
						data.sum += 1;
						app.color28 = 'red';
						plist1.items.push({
							message: this.message28
						})
					}
				},
				click29: function () {
					this.$refs.audio.play();
					app.seen29 = (app.seen29 - 1) ** 2;
					if (app.seen29 == 0) {
						data.sum -= 1;
						app.color29 = 'blue';
						plist1.items.pop({
							message: this.message29
						});
					} else {
						data.sum += 1;
						app.color29 = 'red';
						plist1.items.push({
							message: this.message29
						})
					}
				},
				click30: function () {
					this.$refs.audio.play();
					app.seen30 = (app.seen30 - 1) ** 2;
					if (app.seen30 == 0) {
						data.sum -= 1;
						app.color30 = 'blue';
						plist1.items.pop({
							message: this.message30
						});
					} else {
						data.sum += 1;
						app.color30 = 'red';
						plist1.items.push({
							message: this.message30
						})
					}
				},
				click31: function () {
					this.$refs.audio.play();
					app.seen31 = (app.seen31 - 1) ** 2;
					if (app.seen31 == 0) {
						data.sum -= 1;
						app.color31 = 'blue';
						plist1.items.pop({
							message: this.message31
						});
					} else {
						data.sum += 1;
						app.color31 = 'red';
						plist1.items.push({
							message: this.message31
						})
					}
				},
				click32: function () {
					this.$refs.audio.play();
					app.seen32 = (app.seen32 - 1) ** 2;
					if (app.seen32 == 0) {
						data.sum -= 1;
						app.color32 = 'blue';
						plist1.items.pop({
							message: this.message32
						});
					} else {
						data.sum += 1;
						app.color32 = 'red';
						plist1.items.push({
							message: this.message32
						})
					}
				},
				click33: function () {
					this.$refs.audio.play();
					app.seen33 = (app.seen33 - 1) ** 2;
					if (app.seen33 == 0) {
						data.sum -= 1;
						app.color33 = 'blue';
						plist1.items.pop({
							message: this.message33
						});
					} else {
						data.sum += 1;
						app.color33 = 'red';
						plist1.items.push({
							message: this.message33
						})
					}
				},
				click34: function () {
					this.$refs.audio.play();
					app.seen34 = (app.seen34 - 1) ** 2;
					if (app.seen34 == 0) {
						data.sum -= 1;
						app.color34 = 'blue';
						plist1.items.pop({
							message: this.message34
						});
					} else {
						data.sum += 1;
						app.color34 = 'red';
						plist1.items.push({
							message: this.message34
						})
					}
				},
				click35: function () {
					this.$refs.audio.play();
					app.seen35 = (app.seen35 - 1) ** 2;
					if (app.seen35 == 0) {
						data.sum -= 1;
						app.color35 = 'blue';
						plist1.items.pop({
							message: this.message35
						});
					} else {
						data.sum += 1;
						app.color35 = 'red';
						plist1.items.push({
							message: this.message35
						})
					}
				},
				click36: function () {
					this.$refs.audio.play();
					app.seen36 = (app.seen36 - 1) ** 2;
					if (app.seen36 == 0) {
						data.sum -= 1;
						app.color36 = 'blue';
						plist1.items.pop({
							message: this.message36
						});
					} else {
						data.sum += 1;
						app.color36 = 'red';
						plist1.items.push({
							message: this.message36
						})
					}
				},
				click37: function () {
					this.$refs.audio.play();
					app.seen37 = (app.seen37 - 1) ** 2;
					if (app.seen37 == 0) {
						data.sum -= 1;
						app.color37 = 'blue';
						plist1.items.pop({
							message: this.message37
						});
					} else {
						data.sum += 1;
						app.color37 = 'red';
						plist1.items.push({
							message: this.message37
						})
					}
				},
				click38: function () {
					this.$refs.audio.play();
					app.seen38 = (app.seen38 - 1) ** 2;
					if (app.seen38 == 0) {
						data.sum -= 1;
						app.color38 = 'blue';
						plist1.items.pop({
							message: this.message38
						});
					} else {
						data.sum += 1;
						app.color38 = 'red';
						plist1.items.push({
							message: this.message38
						})
					}
				},
				click39: function () {
					this.$refs.audio.play();
					app.seen39 = (app.seen39 - 1) ** 2;
					if (app.seen39 == 0) {
						data.sum -= 1;
						app.color39 = 'blue';
						plist1.items.pop({
							message: this.message39
						});
					} else {
						data.sum += 1;
						app.color39 = 'red';
						plist1.items.push({
							message: this.message39
						})
					}
				},
				click40: function () {
					this.$refs.audio.play();
					app.seen40 = (app.seen40 - 1) ** 2;
					if (app.seen40 == 0) {
						data.sum -= 1;
						app.color40 = 'blue';
						plist1.items.pop({
							message: this.message40
						});
					} else {
						data.sum += 1;
						app.color40 = 'red';
						plist1.items.push({
							message: this.message40
						})
					}
				},
				click41: function () {
					this.$refs.audio.play();
					app.seen41 = (app.seen41 - 1) ** 2;
					if (app.seen41 == 0) {
						data.sum -= 1;
						app.color41 = 'blue';
						plist1.items.pop({
							message: this.message41
						});
					} else {
						data.sum += 1;
						app.color41 = 'red';
						plist1.items.push({
							message: this.message41
						})
					}
				},
				click42: function () {
					this.$refs.audio.play();
					app.seen42 = (app.seen42 - 1) ** 2;
					if (app.seen42 == 0) {
						data.sum -= 1;
						app.color42 = 'blue';
						plist1.items.pop({
							message: this.message42
						});
					} else {
						data.sum += 1;
						app.color42 = 'red';
						plist1.items.push({
							message: this.message42
						})
					}
				},
				click43: function () {
					this.$refs.audio.play();
					app.seen43 = (app.seen43 - 1) ** 2;
					if (app.seen43 == 0) {
						data.sum -= 1;
						app.color43 = 'blue';
						plist1.items.pop({
							message: this.message43
						});
					} else {
						data.sum += 1;
						app.color43 = 'red';
						plist1.items.push({
							message: this.message43
						})
					}
				},
				click44: function () {
					this.$refs.audio.play();
					app.seen44 = (app.seen44 - 1) ** 2;
					if (app.seen44 == 0) {
						data.sum -= 1;
						app.color44 = 'blue';
						plist1.items.pop({
							message: this.message44
						});
					} else {
						data.sum += 1;
						app.color44 = 'red';
						plist1.items.push({
							message: this.message44
						})
					}
				},
				click45: function () {
					this.$refs.audio.play();
					app.seen45 = (app.seen45 - 1) ** 2;
					if (app.seen45 == 0) {
						data.sum -= 1;
						app.color45 = 'blue';
						plist1.items.pop({
							message: this.message45
						});
					} else {
						data.sum += 1;
						app.color45 = 'red';
						plist1.items.push({
							message: this.message45
						})
					}
				},
				click46: function () {
					this.$refs.audio.play();
					app.seen46 = (app.seen46 - 1) ** 2;
					if (app.seen46 == 0) {
						data.sum -= 1;
						app.color46 = 'blue';
						plist1.items.pop({
							message: this.message46
						});
					} else {
						data.sum += 1;
						app.color46 = 'red';
						plist1.items.push({
							message: this.message46
						})
					}
				},
				click47: function () {
					this.$refs.audio.play();
					app.seen47 = (app.seen47 - 1) ** 2;
					if (app.seen47 == 0) {
						data.sum -= 1;
						app.color47 = 'blue';
						plist1.items.pop({
							message: this.message47
						});
					} else {
						data.sum += 1;
						app.color47 = 'red';
						plist1.items.push({
							message: this.message47
						})
					}
				},
				click48: function () {
					this.$refs.audio.play();
					app.seen48 = (app.seen48 - 1) ** 2;
					if (app.seen48 == 0) {
						data.sum -= 1;
						app.color48 = 'blue';
						plist1.items.pop({
							message: this.message48
						});
					} else {
						data.sum += 1;
						app.color48 = 'red';
						plist1.items.push({
							message: this.message48
						})
					}
				},
				click49: function () {
					this.$refs.audio.play();
					app.seen49 = (app.seen49 - 1) ** 2;
					if (app.seen49 == 0) {
						data.sum -= 1;
						app.color49 = 'blue';
						plist1.items.pop({
							message: this.message49
						});
					} else {
						data.sum += 1;
						app.color49 = 'red';
						plist1.items.push({
							message: this.message49
						})
					}
				},
				click50: function () {
					this.$refs.audio.play();
					app.seen50 = (app.seen50 - 1) ** 2;
					if (app.seen50 == 0) {
						data.sum -= 1;
						app.color50 = 'blue';
						plist1.items.pop({
							message: this.message50
						});
					} else {
						data.sum += 1;
						app.color50 = 'red';
						plist1.items.push({
							message: this.message50
						})
					}
				},
				click51: function () {
					this.$refs.audio.play();
					app.seen51 = (app.seen51 - 1) ** 2;
					if (app.seen51 == 0) {
						data.sum -= 1;
						app.color51 = 'blue';
						plist1.items.pop({
							message: this.message51
						});
					} else {
						data.sum += 1;
						app.color51 = 'red';
						plist1.items.push({
							message: this.message51
						})
					}
				},
				click52: function () {
					this.$refs.audio.play();
					app.seen52 = (app.seen52 - 1) ** 2;
					if (app.seen52 == 0) {
						data.sum -= 1;
						app.color52 = 'blue';
						plist1.items.pop({
							message: this.message52
						});
					} else {
						data.sum += 1;
						app.color52 = 'red';
						plist1.items.push({
							message: this.message52
						})
					}
				},
				click53: function () {
					this.$refs.audio.play();
					app.seen53 = (app.seen53 - 1) ** 2;
					if (app.seen53 == 0) {
						data.sum -= 1;
						app.color53 = 'blue';
						plist1.items.pop({
							message: this.message53
						});
					} else {
						data.sum += 1;
						app.color53 = 'red';
						plist1.items.push({
							message: this.message53
						})
					}
				},
				click54: function () {
					this.$refs.audio.play();
					app.seen54 = (app.seen54 - 1) ** 2;
					if (app.seen54 == 0) {
						data.sum -= 1;
						app.color54 = 'blue';
						plist1.items.pop({
							message: this.message54
						});
					} else {
						data.sum += 1;
						app.color54 = 'red';
						plist1.items.push({
							message: this.message54
						})
					}
				},
				click55: function () {
					this.$refs.audio.play();
					app.seen55 = (app.seen55 - 1) ** 2;
					if (app.seen55 == 0) {
						data.sum -= 1;
						app.color55 = 'blue';
						plist1.items.pop({
							message: this.message55
						});
					} else {
						data.sum += 1;
						app.color55 = 'red';
						plist1.items.push({
							message: this.message55
						})
					}
				},
				click56: function () {
					this.$refs.audio.play();
					app.seen56 = (app.seen56 - 1) ** 2;
					if (app.seen56 == 0) {
						data.sum -= 1;
						app.color56 = 'blue';
						plist1.items.pop({
							message: this.message56
						});
					} else {
						data.sum += 1;
						app.color56 = 'red';
						plist1.items.push({
							message: this.message56
						})
					}
				},
				click57: function () {
					this.$refs.audio.play();
					app.seen57 = (app.seen57 - 1) ** 2;
					if (app.seen57 == 0) {
						data.sum -= 1;
						app.color57 = 'blue';
						plist1.items.pop({
							message: this.message57
						});
					} else {
						data.sum += 1;
						app.color57 = 'red';
						plist1.items.push({
							message: this.message57
						})
					}
				},
				click58: function () {
					this.$refs.audio.play();
					app.seen58 = (app.seen58 - 1) ** 2;
					if (app.seen58 == 0) {
						data.sum -= 1;
						app.color58 = 'blue';
						plist1.items.pop({
							message: this.message58
						});
					} else {
						data.sum += 1;
						app.color58 = 'red';
						plist1.items.push({
							message: this.message58
						})
					}
				},
				click59: function () {
					this.$refs.audio.play();
					app.seen59 = (app.seen59 - 1) ** 2;
					if (app.seen59 == 0) {
						data.sum -= 1;
						app.color59 = 'blue';
						plist1.items.pop({
							message: this.message59
						});
					} else {
						data.sum += 1;
						app.color59 = 'red';
						plist1.items.push({
							message: this.message59
						})
					}
				},
				click60: function () {
					this.$refs.audio.play();
					app.seen60 = (app.seen60 - 1) ** 2;
					if (app.seen60 == 0) {
						data.sum -= 1;
						app.color60 = 'blue';
						plist1.items.pop({
							message: this.message60
						});
					} else {
						data.sum += 1;
						app.color60 = 'red';
						plist1.items.push({
							message: this.message60
						})
					}
				},
				click61: function () {
					this.$refs.audio.play();
					app.seen61 = (app.seen61 - 1) ** 2;
					if (app.seen61 == 0) {
						data.sum -= 1;
						app.color61 = 'blue';
						plist1.items.pop({
							message: this.message61
						});
					} else {
						data.sum += 1;
						app.color61 = 'red';
						plist1.items.push({
							message: this.message61
						})
					}
				},
				click62: function () {
					this.$refs.audio.play();
					app.seen62 = (app.seen62 - 1) ** 2;
					if (app.seen62 == 0) {
						data.sum -= 1;
						app.color62 = 'blue';
						plist1.items.pop({
							message: this.message62
						});
					} else {
						data.sum += 1;
						app.color62 = 'red';
						plist1.items.push({
							message: this.message62
						})
					}
				},
				click63: function () {
					this.$refs.audio.play();
					app.seen63 = (app.seen63 - 1) ** 2;
					if (app.seen63 == 0) {
						data.sum -= 1;
						app.color63 = 'blue';
						plist1.items.pop({
							message: this.message63
						});
					} else {
						data.sum += 1;
						app.color63 = 'red';
						plist1.items.push({
							message: this.message63
						})
					}
				},
				click64: function () {
					this.$refs.audio.play();
					app.seen64 = (app.seen64 - 1) ** 2;
					if (app.seen64 == 0) {
						data.sum -= 1;
						app.color64 = 'blue';
						plist1.items.pop({
							message: this.message64
						});
					} else {
						data.sum += 1;
						app.color64 = 'red';
						plist1.items.push({
							message: this.message64
						})
					}
				},
				click65: function () {
					this.$refs.audio.play();
					app.seen65 = (app.seen65 - 1) ** 2;
					if (app.seen65 == 0) {
						data.sum -= 1;
						app.color65 = 'blue';
						plist1.items.pop({
							message: this.message65
						});
					} else {
						data.sum += 1;
						app.color65 = 'red';
						plist1.items.push({
							message: this.message65
						})
					}
				},
				click66: function () {
					this.$refs.audio.play();
					app.seen66 = (app.seen66 - 1) ** 2;
					if (app.seen66 == 0) {
						data.sum -= 1;
						app.color66 = 'blue';
						plist1.items.pop({
							message: this.message66
						});
					} else {
						data.sum += 1;
						app.color66 = 'red';
						plist1.items.push({
							message: this.message66
						})
					}
				},
				click67: function () {
					this.$refs.audio.play();
					app.seen67 = (app.seen67 - 1) ** 2;
					if (app.seen67 == 0) {
						data.sum -= 1;
						app.color67 = 'blue';
						plist1.items.pop({
							message: this.message67
						});
					} else {
						data.sum += 1;
						app.color67 = 'red';
						plist1.items.push({
							message: this.message67
						})
					}
				},
				click68: function () {
					this.$refs.audio.play();
					app.seen68 = (app.seen68 - 1) ** 2;
					if (app.seen68 == 0) {
						data.sum -= 1;
						app.color68 = 'blue';
						plist1.items.pop({
							message: this.message68
						});
					} else {
						data.sum += 1;
						app.color68 = 'red';
						plist1.items.push({
							message: this.message68
						})
					}
				},
				click69: function () {
					this.$refs.audio.play();
					app.seen69 = (app.seen69 - 1) ** 2;
					if (app.seen69 == 0) {
						data.sum -= 1;
						app.color69 = 'blue';
						plist1.items.pop({
							message: this.message69
						});
					} else {
						data.sum += 1;
						app.color69 = 'red';
						plist1.items.push({
							message: this.message69
						})
					}
				},
				click70: function () {
					this.$refs.audio.play();
					app.seen70 = (app.seen70 - 1) ** 2;
					if (app.seen70 == 0) {
						data.sum -= 1;
						app.color70 = 'blue';
						plist1.items.pop({
							message: this.message70
						});
					} else {
						data.sum += 1;
						app.color70 = 'red';
						plist1.items.push({
							message: this.message70
						})
					}
				},
				click71: function () {
					this.$refs.audio.play();
					app.seen71 = (app.seen71 - 1) ** 2;
					if (app.seen71 == 0) {
						data.sum -= 1;
						app.color71 = 'blue';
						plist1.items.pop({
							message: this.message71
						});
					} else {
						data.sum += 1;
						app.color71 = 'red';
						plist1.items.push({
							message: this.message71
						})
					}
				},
				click72: function () {
					this.$refs.audio.play();
					app.seen72 = (app.seen72 - 1) ** 2;
					if (app.seen72 == 0) {
						data.sum -= 1;
						app.color72 = 'blue';
						plist1.items.pop({
							message: this.message72
						});
					} else {
						data.sum += 1;
						app.color72 = 'red';
						plist1.items.push({
							message: this.message72
						})
					}
				},
				click73: function () {
					this.$refs.audio.play();
					app.seen73 = (app.seen73 - 1) ** 2;
					if (app.seen73 == 0) {
						data.sum -= 1;
						app.color73 = 'blue';
						plist1.items.pop({
							message: this.message73
						});
					} else {
						data.sum += 1;
						app.color73 = 'red';
						plist1.items.push({
							message: this.message73
						})
					}
				},
				click74: function () {
					this.$refs.audio.play();
					app.seen74 = (app.seen74 - 1) ** 2;
					if (app.seen74 == 0) {
						data.sum -= 1;
						app.color74 = 'blue';
						plist1.items.pop({
							message: this.message74
						});
					} else {
						data.sum += 1;
						app.color74 = 'red';
						plist1.items.push({
							message: this.message74
						})
					}
				},
				click75: function () {
					this.$refs.audio.play();
					app.seen75 = (app.seen75 - 1) ** 2;
					if (app.seen75 == 0) {
						data.sum -= 1;
						app.color75 = 'blue';
						plist1.items.pop({
							message: this.message75
						});
					} else {
						data.sum += 1;
						app.color75 = 'red';
						plist1.items.push({
							message: this.message75
						})
					}
				},
				click76: function () {
					this.$refs.audio.play();
					app.seen76 = (app.seen76 - 1) ** 2;
					if (app.seen76 == 0) {
						data.sum -= 1;
						app.color76 = 'blue';
						plist1.items.pop({
							message: this.message76
						});
					} else {
						data.sum += 1;
						app.color76 = 'red';
						plist1.items.push({
							message: this.message76
						})
					}
				},
				click77: function () {
					this.$refs.audio.play();
					app.seen77 = (app.seen77 - 1) ** 2;
					if (app.seen77 == 0) {
						data.sum -= 1;
						app.color77 = 'blue';
						plist1.items.pop({
							message: this.message77
						});
					} else {
						data.sum += 1;
						app.color77 = 'red';
						plist1.items.push({
							message: this.message77
						})
					}
				},
				click78: function () {
					this.$refs.audio.play();
					app.seen78 = (app.seen78 - 1) ** 2;
					if (app.seen78 == 0) {
						data.sum -= 1;
						app.color78 = 'blue';
						plist1.items.pop({
							message: this.message78
						});
					} else {
						data.sum += 1;
						app.color78 = 'red';
						plist1.items.push({
							message: this.message78
						})
					}
				},
				click79: function () {
					this.$refs.audio.play();
					app.seen79 = (app.seen79 - 1) ** 2;
					if (app.seen79 == 0) {
						data.sum -= 1;
						app.color79 = 'blue';
						plist1.items.pop({
							message: this.message79
						});
					} else {
						data.sum += 1;
						app.color79 = 'red';
						plist1.items.push({
							message: this.message79
						})
					}
				},
				click80: function () {
					this.$refs.audio.play();
					app.seen80 = (app.seen80 - 1) ** 2;
					if (app.seen80 == 0) {
						data.sum -= 1;
						app.color80 = 'blue';
						plist1.items.pop({
							message: this.message80
						});
					} else {
						data.sum += 1;
						app.color80 = 'red';
						plist1.items.push({
							message: this.message80
						})
					}
				},
				click81: function () {
					this.$refs.audio.play();
					app.seen81 = (app.seen81 - 1) ** 2;
					if (app.seen81 == 0) {
						data.sum -= 1;
						app.color81 = 'blue';
						plist1.items.pop({
							message: this.message81
						});
					} else {
						data.sum += 1;
						app.color81 = 'red';
						plist1.items.push({
							message: this.message81
						})
					}
				},
				click82: function () {
					this.$refs.audio.play();
					app.seen82 = (app.seen82 - 1) ** 2;
					if (app.seen82 == 0) {
						data.sum -= 1;
						app.color82 = 'blue';
						plist1.items.pop({
							message: this.message82
						});
					} else {
						data.sum += 1;
						app.color82 = 'red';
						plist1.items.push({
							message: this.message82
						})
					}
				},
				click83: function () {
					this.$refs.audio.play();
					app.seen83 = (app.seen83 - 1) ** 2;
					if (app.seen83 == 0) {
						data.sum -= 1;
						app.color83 = 'blue';
						plist1.items.pop({
							message: this.message83
						});
					} else {
						data.sum += 1;
						app.color83 = 'red';
						plist1.items.push({
							message: this.message83
						})
					}
				},
				click84: function () {
					this.$refs.audio.play();
					app.seen84 = (app.seen84 - 1) ** 2;
					if (app.seen84 == 0) {
						data.sum -= 1;
						app.color84 = 'blue';
						plist1.items.pop({
							message: this.message84
						});
					} else {
						data.sum += 1;
						app.color84 = 'red';
						plist1.items.push({
							message: this.message84
						})
					}
				},
				click85: function () {
					this.$refs.audio.play();
					app.seen85 = (app.seen85 - 1) ** 2;
					if (app.seen85 == 0) {
						data.sum -= 1;
						app.color85 = 'blue';
						plist1.items.pop({
							message: this.message85
						});
					} else {
						data.sum += 1;
						app.color85 = 'red';
						plist1.items.push({
							message: this.message85
						})
					}
				},
				click86: function () {
					this.$refs.audio.play();
					app.seen86 = (app.seen86 - 1) ** 2;
					if (app.seen86 == 0) {
						data.sum -= 1;
						app.color86 = 'blue';
						plist1.items.pop({
							message: this.message86
						});
					} else {
						data.sum += 1;
						app.color86 = 'red';
						plist1.items.push({
							message: this.message86
						})
					}
				},
				click87: function () {
					this.$refs.audio.play();
					app.seen87 = (app.seen87 - 1) ** 2;
					if (app.seen87 == 0) {
						data.sum -= 1;
						app.color87 = 'blue';
						plist1.items.pop({
							message: this.message87
						});
					} else {
						data.sum += 1;
						app.color87 = 'red';
						plist1.items.push({
							message: this.message87
						})
					}
				},
				click88: function () {
					this.$refs.audio.play();
					app.seen88 = (app.seen88 - 1) ** 2;
					if (app.seen88 == 0) {
						data.sum -= 1;
						app.color88 = 'blue';
						plist1.items.pop({
							message: this.message88
						});
					} else {
						data.sum += 1;
						app.color88 = 'red';
						plist1.items.push({
							message: this.message88
						})
					}
				},
				click89: function () {
					this.$refs.audio.play();
					app.seen89 = (app.seen89 - 1) ** 2;
					if (app.seen89 == 0) {
						data.sum -= 1;
						app.color89 = 'blue';
						plist1.items.pop({
							message: this.message89
						});
					} else {
						data.sum += 1;
						app.color89 = 'red';
						plist1.items.push({
							message: this.message89
						})
					}
				},
				click90: function () {
					this.$refs.audio.play();
					app.seen90 = (app.seen90 - 1) ** 2;
					if (app.seen90 == 0) {
						data.sum -= 1;
						app.color90 = 'blue';
						plist1.items.pop({
							message: this.message90
						});
					} else {
						data.sum += 1;
						app.color90 = 'red';
						plist1.items.push({
							message: this.message90
						})
					}
				},
				click91: function () {
					this.$refs.audio.play();
					app.seen91 = (app.seen91 - 1) ** 2;
					if (app.seen91 == 0) {
						data.sum -= 1;
						app.color91 = 'blue';
						plist1.items.pop({
							message: this.message91
						});
					} else {
						data.sum += 1;
						app.color91 = 'red';
						plist1.items.push({
							message: this.message91
						})
					}
				},
				click92: function () {
					this.$refs.audio.play();
					app.seen92 = (app.seen92 - 1) ** 2;
					if (app.seen92 == 0) {
						data.sum -= 1;
						app.color92 = 'blue';
						plist1.items.pop({
							message: this.message92
						});
					} else {
						data.sum += 1;
						app.color92 = 'red';
						plist1.items.push({
							message: this.message92
						})
					}
				},
				click93: function () {
					this.$refs.audio.play();
					app.seen93 = (app.seen93 - 1) ** 2;
					if (app.seen93 == 0) {
						data.sum -= 1;
						app.color93 = 'blue';
						plist1.items.pop({
							message: this.message93
						});
					} else {
						data.sum += 1;
						app.color93 = 'red';
						plist1.items.push({
							message: this.message93
						})
					}
				},
				click94: function () {
					this.$refs.audio.play();
					app.seen94 = (app.seen94 - 1) ** 2;
					if (app.seen94 == 0) {
						data.sum -= 1;
						app.color94 = 'blue';
						plist1.items.pop({
							message: this.message94
						});
					} else {
						data.sum += 1;
						app.color94 = 'red';
						plist1.items.push({
							message: this.message94
						})
					}
				},
				click95: function () {
					this.$refs.audio.play();
					app.seen95 = (app.seen95 - 1) ** 2;
					if (app.seen95 == 0) {
						data.sum -= 1;
						app.color95 = 'blue';
						plist1.items.pop({
							message: this.message95
						});
					} else {
						data.sum += 1;
						app.color95 = 'red';
						plist1.items.push({
							message: this.message95
						})
					}
				},
				click96: function () {
					this.$refs.audio.play();
					app.seen96 = (app.seen96 - 1) ** 2;
					if (app.seen96 == 0) {
						data.sum -= 1;
						app.color96 = 'blue';
						plist1.items.pop({
							message: this.message96
						});
					} else {
						data.sum += 1;
						app.color96 = 'red';
						plist1.items.push({
							message: this.message96
						})
					}
				},
				click97: function () {
					this.$refs.audio.play();
					app.seen97 = (app.seen97 - 1) ** 2;
					if (app.seen97 == 0) {
						data.sum -= 1;
						app.color97 = 'blue';
						plist1.items.pop({
							message: this.message97
						});
					} else {
						data.sum += 1;
						app.color97 = 'red';
						plist1.items.push({
							message: this.message97
						})
					}
				},
				click98: function () {
					this.$refs.audio.play();
					app.seen98 = (app.seen98 - 1) ** 2;
					if (app.seen98 == 0) {
						data.sum -= 1;
						app.color98 = 'blue';
						plist1.items.pop({
							message: this.message98
						});
					} else {
						data.sum += 1;
						app.color98 = 'red';
						plist1.items.push({
							message: this.message98
						})
					}
				},
				click99: function () {
					this.$refs.audio.play();
					app.seen99 = (app.seen99 - 1) ** 2;
					if (app.seen99 == 0) {
						data.sum -= 1;
						app.color99 = 'blue';
						plist1.items.pop({
							message: this.message99
						});
					} else {
						data.sum += 1;
						app.color99 = 'red';
						plist1.items.push({
							message: this.message99
						})
					}
				},
				click100: function () {
					this.$refs.audio.play();
					app.seen100 = (app.seen100 - 1) ** 2;
					if (app.seen100 == 0) {
						data.sum -= 1;
						app.color100 = 'blue';
						plist1.items.pop({
							message: this.message100
						});
					} else {
						data.sum += 1;
						app.color100 = 'red';
						plist1.items.push({
							message: this.message100
						})
					}
				},
				click101: function () {
					this.$refs.audio.play();
					app.seen101 = (app.seen101 - 1) ** 2;
					if (app.seen101 == 0) {
						data.sum -= 1;
						app.color101 = 'blue';
						plist1.items.pop({
							message: this.message101
						});
					} else {
						data.sum += 1;
						app.color101 = 'red';
						plist1.items.push({
							message: this.message101
						})
					}
				},
				click102: function () {
					this.$refs.audio.play();
					app.seen102 = (app.seen102 - 1) ** 2;
					if (app.seen102 == 0) {
						data.sum -= 1;
						app.color102 = 'blue';
						plist1.items.pop({
							message: this.message102
						});
					} else {
						data.sum += 1;
						app.color102 = 'red';
						plist1.items.push({
							message: this.message102
						})
					}
				},
			}
		});
		var vm = new Vue({
			el: '#sum',
			data: data
		});
		var vm1 = new Vue({
			el: '#sum1',
			data: data
		});
		var sn = new Vue({
			el: '#sinian',
			methods: {

			}
		});
	</script>
	<script>
		var imgWrap = [];
		var imgSrcArr = [
			'img/xuanze/quan1_01.jpg',
			'img/xuanze/quan1_02.jpg',
			'img/xuanze/quan1_03.jpg',
			'img/jieguo/jieguo_01.jpg',
			'img/jieguo/jieguo_02.jpg',
			'img/jieguo/jieguo_03.jpg',
			'img/zhengshu/zs1.png',
			'img/zhengshu/zs2.png',
			'img/zhengshu/zs3.png',
			'img/zhengshu/zs4.png',

		];

		function preloadImg(arr) {
			for (var i = 0; i < arr.length; i++) {
				imgWrap[i] = new Image();
				imgWrap[i].src = arr[i];
			}
		}
		preloadImg(imgSrcArr);
	</script>
	<script>
		$(document).ready(function () {
			$(".smooth").click(function () {
				var href = $(this).attr("href");
				var pos = $(href).offset().top;
				$("html,body").animate({
					scrollTop: pos
				}, 1000);
				return false;
			});
		});
	</script>

</body>

</html>